<template>
  <view class="pms">
    <view class="btn" @click="handleClick">
      <slot></slot>
    </view>
    <f-popup position="bottom" :show-flag.sync="showFlag">
      <view class="head-bg mb20">
        <button open-type="chooseAvatar" @chooseavatar="avatarCB">+</button>
        <image class="avatar" mode="aspectFill" v-if="params.avatarUrl.length>0" :src="params.avatarUrl"></image>
      </view>
      <view class="font28 mb20">欢迎加入精品咖啡沙龙</view>
      <view class="font13 gray mb60">请完善个人信息完成注册</view>
      <view class="cell flex mb60">
        <view class="title bolder font16 require">昵称</view>
        <input class="font16" type="nickname" v-model="params.nickName" placeholder="请输入昵称"></input>
      </view>
<!--      <view class="cell flex mb60">-->
<!--        <view class="title bolder font16 require">手机</view>-->
<!--        <input class="font16"  type="nickname" v-model="userInfo.nickName" placeholder="请输入昵称"></input>-->
<!--      </view>-->
      <button class="submit-btn font20 mb60" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">快速注册</button>
    </f-popup>
  </view>
</template>

<script>
import FPopup from "@/pages/components/f-popup.vue";
import {mapState} from 'vuex';
import {postLogin} from "@/api";
import {Validate} from "@/config/validate";
import request from "@/config/request";
import {setToken} from "@/config/auth";
import {setStore} from "@/config/util";
export default {
  name: 'f-pms-btn',
  components: {FPopup},
  props: {
  },
  data() {
    return {
      showFlag: false,
      params: {
        code:'',
        nickName: '',
        avatarUrl: '',
        phone:'15559117317'
      }
    };
  },
  computed: {
    ...mapState(['loginCode'])
  },
  methods: {
    handleClick(e) {
      if (!this.loginCode || this.loginCode.length === 0){
        this.showFlag = true;
      }else{
        this.$emit('click', e);
      }
    },
    avatarCB(e){
      this.params.avatarUrl = e.detail.avatarUrl;

    },
    loginClick(){
      if (Validate.isEmpty(this.params.nickName)){
        uni.showToast({title:'请输入昵称',icon:'none'});
        return;
      }
      uni.login({
        provider: 'weixin', // 指定微信登录
        success: (res) => {
          console.log(res)
          if (res.code) {
            this.params.code = res.code;
            this.$store.commit('saveLoginCode', res.code);
            this.sendUserInfoToServer();
          } else {
            console.error('登录失败:', res.errMsg);
            uni.showToast({ title: '登录失败', icon: 'none' });
          }
        },
        fail: (err) => {
          console.error('调用登录接口失败:', err);
          uni.showToast({ title: '登录失败', icon: 'none' });
        }
      });
    },
    getPhoneNumber(e){
      console.log(e);
      let {code, encryptedData} = e.detail;
      this.params.code = code;
      uni.login({
        provider: 'weixin', // 指定微信登录
        success: (res) => {
          console.log(res)
          if (res.code) {
            this.params.code = res.code;
            this.sendUserInfoToServer();
          } else {
            console.error('登录失败:', res.errMsg);
            uni.showToast({ title: '登录失败', icon: 'none' });
          }
        },
        fail: (err) => {
          console.error('调用登录接口失败:', err);
          uni.showToast({ title: '登录失败', icon: 'none' });
        }
      });
    },
    sendUserInfoToServer() {
      let dic = {...this.params}
      postLogin(dic).then(res=>{
        setToken(res.data.token);
        setStore('userInfo',res.data,1);
      });
    }
  },
  created() {

  }
};
</script>

<style lang="scss" scoped>
.head-bg{
  height: 100rpx;
  width: 100rpx;
  position: relative;
  button{
    width: 100%;
    height: 100%;
    font-size: 40rpx;
  }
  .avatar{
    position: absolute;
    border-radius: 10rpx;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
.tips {
  text-align: center;
  padding: 40rpx 0 80rpx;

  .iconfont {
    color: var(--bbb);
    font-size: 120rpx;
  }

  .text {
    color: var(--c777);
    margin-top: 50rpx;
  }
}

.content-tips {
  margin: 20rpx;
  background: #fff;
  padding: 250rpx 0;
  border-radius: 20rpx;

  .iconfont {
    font-size: 90rpx;
  }
}
.cell{
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid var(--bg);
  .title{
    width: 200rpx;
  }
}
.require::before {
  content: '*';
  color: red;
  margin-right: 5px; /* 调整间距 */
}
.submit-btn{
  height: 100rpx;
  border-radius: 50rpx;
  background-color: var(--nav-bg-c);
  color: white;
}
</style>
